chrome デベロッパー ツールの見方
デベロッパー ツールにアクセスする
ページを右クリックし、要素を検証 を選択します。クリックした要素の HTML コードが表示されます。 「alt+command+i」ショートカットを使用します。
利用可能なタブと使用例
要素 タブ: ページのレンダリング完了後の HTML が表示されます。これは、ページのソースコードとは異なります。ページの読み込み時に JavaScript によって HTML 要素が作成または書き換えられた場合、レンダリング完了後の HTML にはそれらの変更内容が反映されます。一方、ページのソースコードは変更がない状態で表示されます。 使用例
リソース タブ: 検査対象のページとともに読み込まれたさまざまなリソースを表形式で確認できます。ここには画像、HTML ドキュメント、JavaScript ファイルなどが含まれています。このタブでは、「検索」機能を使って、該当のページ内に限定せずにページで利用可能なリソース全体を検索できるので、キャンペーン マネージャー 360 関連の問題のトラブルシューティングに便利です。 使用例
ネットワーク タブ: 組み込みのプロキシ スニファーとして、ページの読み込み時とそれ以降のページの HTML トラフィックの監視に利用できます。 使用例
スクリプト タブ: JavaScript コードのデバッグに役立ちます。ウェブ デベロッパーにとっては重要なツールですが、キャンペーン マネージャー 360 の QA やトラブルシューティングには直接関係ありません。 タイムライン タブ: 一定の期間にわたって HTTP トラフィックとメモリ使用状況が表示されます。ネットワーク タブと同様、待ち時間の原因を特定するのに有効ですが、それ以外の場合は、キャンペーン マネージャー 360 関連の問題には関係ありません。 プロフィール タブ: ウェブ デベロッパーがウェブ アプリケーション内の CPU 使用率を最適化する場合に役立つツールです。キャンペーン マネージャー 360 関連の問題には関係ありません。 監査 タブ: ページの読み込み時にページを分析することで、ページの読み込み時間を短縮するための推奨や最適化を提供し、予想される反応と実際の反応を向上させることができます。キャンペーン マネージャー 360 関連の問題には関係ありません。 コンソール タブ: ページのコードエラーを自動的に検出します。ネットワーク タブでタグが呼び出されていないことがわかった場合は、コンソール タブを使用してその原因の手がかりをつかめることがあります。